<template>
  <view class="area_container">
    <wd-cell-group border>
      <wd-checkbox-group v-model="selectedgroups" size="large" cell>
        <wd-cell :title="item.name" v-for="item in areas" :key="item.id" center>
          <view @click.stop="noop">
            <wd-checkbox
              :model-value="item.id"
              custom-style="margin:0;"
            ></wd-checkbox>
          </view>
        </wd-cell>
      </wd-checkbox-group>
    </wd-cell-group>
    <view class="fixed-button">
      <wd-button size="large" @click="modifyclick">修改</wd-button>
    </view>
    <wd-toast />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { useUserStore } from '@/store/user/index'
import {
  GetAreaByPhoneID,
  GetActiveAreaByPhoneID,
  SetAreagroupByPhoneId
} from '@/API/areagroup/index'
import type { areagroupdto } from '@/API/areagroup/types'
import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()
const selectedgroups = ref<string[]>()
const areas = ref<areagroupdto[]>([])
// const activeareagroups = ref<areagroupdto[]>([])
onMounted(async () => {
  const userStore = useUserStore()

  const area = await GetAreaByPhoneID(userStore.phoneid)
  areas.value = area

  const activearea = await GetActiveAreaByPhoneID(userStore.phoneid)
  //   activeareagroups.value = activearea
  selectedgroups.value = activearea.map(v => v.id)
  console.log('mounted', areas.value)
})
function noop() {}
const modifyclick = async () => {
  const groups = areas.value.filter(v => selectedgroups.value?.includes(v.id))
  const userStore = useUserStore()
  const result = await SetAreagroupByPhoneId(userStore.phoneid, groups)
  if (result.code == '200') {
    toast.success('修改成功')
  } else {
    toast.error('修改失败')
  }
  //console.log(result)
}
</script>

<style lang="scss" scoped>
.area_container {
  margin: 30rpx;

  .fixed-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.06);
    z-index: 4;
    text-align: right;
    padding-right: 20rpx;
    padding-bottom: 50rpx;
  }
}
</style>
